
<script lang="ts" setup>
	import type {  ModileList } from "@/api/auth/types";
    // import avatarImg from "@/assets/images/avatar/long.gif";
    import buggyfill from 'viewport-units-buggyfill';  

    const scrollbarRef = ref();
    const contentRef = ref();  
    const isshow = ref(false);
    const emits = defineEmits(["refreshcode"]);
    const props = defineProps({
        modileList:{
            type: Array as PropType<ModileList[]>,
            required: true,
        },
        disabledvalue:{
            type: Boolean,
            required: true,
        },
        modbileType:{
            type:String
        }
    });
    
    // 清空页面 并重新获取会话
    function deleteref(){
        emits('refreshcode',true)
    }
    function handleScroll(){
        // console.log('监听滚动');
    }
    // 判断用户的表情
    function expression(emotion:any){
        switch (emotion) {
            case '愤怒':
                return '/images/img/emotion/emotion_anger_32.png';
            case '稍有不满':
                return '/images/img/emotion/emotion_dissatisfy_32.png';
            case '辱骂':
                return '/images/img/emotion/emotion_abuse_32.png';
            case '高兴':
                return '/images/img/emotion/emotion_smile_32.png';
            case '不耐烦':
                return '/images/img/emotion/emotion_impatient_32.png';
            case '一般':
                return '/images/img/emotion/emotion_normal_32.png';
            default:
                return '';
        }
    }
    // 定义处理resize的函数
    const handleResize = () => {
      scrollbarRef.value.scrollTop = scrollbarRef.value.scrollHeight
    };
    // 在组件挂载时添加事件监听
    onMounted(() => {
        //第三方库，它们旨在解决不同浏览器和平台间 vh 和 vw 单位的兼容性问题。
        buggyfill.init({}); 
        window.addEventListener('resize', handleResize);
    })
    // 在组件卸载时移除事件监听
    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });
    // 监听数组的变化 好让向下滚动
    watch(props.modileList,() => {
        nextTick(() => {
            // if (contentRef.value.scrollHeight>=scrollbarRef.value.scrollHeight) {
                if (contentRef.value) {  
                    // 滚动到底部 
                    scrollbarRef.value.scrollTo({  
                        top:scrollbarRef.value.scrollHeight,  
                        behavior: 'auto', // smooth是平滑滚动 比较适合pc端
                    });  
                } 
            // }
        });
    },{deep: true})
    // 监听ai回复 回复完成 显示清空页面并重新获取会话code按钮就显示
    watch(()=>props.disabledvalue,(newValue:any)=>{
        isshow.value = newValue;        
    },{immediate:true,deep:true})
</script>
<template>
    <section class="center pb-16" ref="scrollbarRef" @scroll.native="handleScroll">
        <div class="cenetr-line" ref="contentRef">
            <div v-for="(item,index) in props.modileList" :key="index">
                <div v-show="item.input_content" class="flex flex-col ">
                    <div class="flex   px-3.5 py-2.5 justify-end" >
                        <div class="user p-2.5 relative rounded-lg ">
                            <div class="text-right">{{props.modbileType=='10'?'我':'智能客服'}}</div>
                            <div class="problem">
                                {{ item.input_content}}
                            </div>
                        </div>
                        <div  class="w-11 h-11 mt-2 relative">
                            <div class="emote-box absolute" v-if="item.emotion!=''">
                                <img class="w-6 h-6" :src='expression(item.emotion)'  alt="">
                            </div>
                            <img  v-show="props.modbileType=='20'" src="/src/assets/images/AI_avatar.png" alt="" class="w-11  rounded">
                            <img  v-show="props.modbileType=='10'" src="/src/assets/images/user_circle_64_light_blue.png" alt="" class="w-11  rounded">
                        </div>
                    </div>
                </div>
                <div v-show="item.output_content" class="flex flex-col">
                    <div class="flex self-start px-3.5 py-2.5 w-full" >
                        <div  class="w-11 h-11 mt-2">
                            <img v-show="props.modbileType=='20'"  src="/src/assets/images/user_circle_64_light_blue.png" alt="" class="w-11  rounded">
                            <img v-show="props.modbileType=='10'" src="/src/assets/images/AI_avatar.png" alt="" class="w-11 rounded">
                        </div>
                        <div class="answer p-2.5 relative rounded-lg ">
                            <div>{{props.modbileType=='10'?'智能客服':'居民'}}</div>
                            <div class="answer-content flex">
                                <span v-show="item.loat"><img src="../../../assets/images/avatar/long.gif" alt="" class="w-5 h-5 mr-1"></span>
                                {{ item.output_content}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="!isshow" class="absolute w-9 h-7 deleteref rounded-md flex items-center justify-center" @click="deleteref">
            <el-icon :size="20" color="#E6A23C"><Delete /></el-icon>
        </div>
    </section>
</template>

<style scoped>
.center{
    width: 100%;
    height: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
    scrollbar-width: none;
    overflow-y: scroll !important;
    /* height: 93vh !important; */
}
.cenetr-line{
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
}
.center::-webkit-scrollbar {
    display: none;  /* Chrome, Safari 和 Opera */
  }
.emote-box{
    right: -10px;
    top: -10px;
}
.deleteref{
    top: 5px;
    right: 30px;
    border: 1px solid #FAA800;
    background: #FFE4AE;
    line-height: 28px;
}
.max-box{
    max-width: 70%;
}
.answer{
    max-width: 70%;
    padding-top: 0;
    color: #606266;
}
.answer-content{
    background: #FFFFFF;
    /* font-size: 2px; */
    padding: 10px 15px;
    box-shadow: 0 0 20rpx rgba(153,153,153,.2);
    border-top-left-radius: 2px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    word-break: break-all;
}
.user{
    max-width: 70%;
    padding-top: 0;
}
.problem{
    background: linear-gradient( 90deg, #3259ce 0%, #3259ce 100%), #3259ce;
    color: white;
    /* font-size: 28rpx; */
    padding: 10px 15px;
    box-shadow: 0 0 20rpx rgba(153,153,153,.2);
    border-top-left-radius:  15px;
    border-top-right-radius:  2px;
    border-bottom-left-radius:  15px;
    border-bottom-right-radius:  15px;
    word-break: break-all;
}
</style>